import React, { Component } from 'react'
import './main.css';
import { Menu ,Button} from 'antd'; // 引入菜单组件
import {
  TeamOutlined,
  UsergroupAddOutlined,
  SolutionOutlined,
  UserSwitchOutlined,
} from '@ant-design/icons'; // 引入图标
import { Route, Switch } from 'react-router-dom'
import Member from './member' // 会去找member.jsx member/index.jsx
import Role from './role' // 角色管理
import Organization from './organization' // 部门管理
// import store from '@/store'//引入全局状态
import {connect} from 'react-redux'//引入connect方法
import Detail from '@/pages/member/Detail'
import Question from './question';
import Test from './test';
import Sass from './sass';


// 去除导出
class Main extends Component {
  personalRef = React.createRef(); // 生成一个ref
  onMenuClick = (e) => { // 菜单被点击的回调
    this.props.history.push(e.key); // 跳转到响应的页面
  }
  logout = () => { // 退出登录
    localStorage.removeItem('userId');
    this.props.history.replace('/login'); // 使用替换
  }

  render() {
    const items = [
      {
        key: '/', // key指定为路由的名称，我们配置为路由的path，用来跳转
        label: '人员管理', // 菜单显示内容
        icon: <TeamOutlined />, // 图标
      },
      {
        key: '/role',
        label: '角色管理',
        icon: <UserSwitchOutlined />,
      },
      {
        key: '/organization',
        label: '部门管理',
        icon: <UsergroupAddOutlined />,
      },
      {
        key: '/question',
        label: '问卷管理',
        icon: <SolutionOutlined />,
      },
      {
        key: '/test',
        label: '测试',
        icon: <SolutionOutlined />,
      },
      {
        key: '/sass',
        label: 'Sass练习',
        icon: <SolutionOutlined />,
      },
    ];
    const {personal} = this.props //这个personal是通过mapStateToProps得到的属性
    return (
      <div className='main'>
        <div className='head'>
          <div className="title">上海市政务问卷系统</div>
          <div className="name"><span style={{cursor: 'pointer', marginRight: 10, }} onClick={()=>{
              this.personalRef.current.show(personal, true);
            }}>{ personal?.name }</span><div><Button type="primary" onClick={this.logout}>退出登录</Button ></div></div>
          
        </div>
        <div className='body'>
          <div className='menu'>
            <Menu items={items} onClick={this.onMenuClick}></Menu>
          </div>
          <div className='content'>
            <Switch>
              <Route exact path="/" component={Member}></Route>
              <Route path="/role" component={Role}></Route>
              <Route path="/organization" component={Organization}></Route>
              <Route path="/question" component={Question}></Route>
              <Route path="/test" component={Test}></Route>
              <Route path="/sass" component={Sass}></Route>
            </Switch>
          </div>
        </div>
        <Detail ref={this.personalRef}></Detail>
      </div>
    )
  }
}
// 将state转为this.props的数据
const mapStateToProps = state => ({personal: state.personal})
// 将dispatch转为props的方法
const mapDispatchToProps = dispatch => ({ setPersonal: (info) => dispatch({ type: 'setPersonal', payload: info }) }) 
 // 使用高阶组件导出
export default connect(mapStateToProps, mapDispatchToProps)(Main);